<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<div id="app">
<el-card class="box-card">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="订单号">
              <el-input v-model="search.oid" placeholder="订单号"></el-input>
            </el-form-item>
            <el-form-item label="买家">
                <el-input v-model="search.uname" placeholder="买家"></el-input>
              </el-form-item>
              <el-form-item label="商品名称">
                <el-input v-model="search.pname" placeholder="商品名称"></el-input>
              </el-form-item>
    
            <el-form-item>
              <el-button type="primary" @click="byselectL">查询</el-button>
            </el-form-item>
          </el-form>

        <!--表格显示-->
          <el-table
          :data="orderInfo"
          border
          style="width: 100%; margin-top: 40px; min-height: 290px">
          <el-table-column
          label="订单号"
          align="center"
          width="80px"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.oid }}</span>
          </template>
          </el-table-column>
          
          <el-table-column
          align="center"
		     label="姓名"
		     width="70">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="left">
          <p>姓名: {{ scope.row.aname }}</p>
          <p>电话: {{ scope.row.atel }}</p>
          <p>地址: {{ scope.row.province }}省 {{ scope.row.city }}市 {{ scope.row.area }}区 {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.uname }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
          
          <el-table-column
          label="购买时间"
          align="center" width="160px"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.time }}</span>
          </template>
          </el-table-column>
          <el-table-column
          label="总金额"
          align="center"
          >
          <template slot-scope="scope">
            <span v-if="scope.row.discount == ''">{{ scope.row.countmoneys }}</span>
          <span v-if="scope.row.discount != ''">{{ (scope.row.countmoneys / scope.row.discount).toFixed(2) }}</span>
          </template>
          </el-table-column>
          <el-table-column
          label="实收金额"
          align="center"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.countmoneys}}</span>
          </template>
          </el-table-column>
          
          <!-- 订单商品显示 -->
          <el-table-column
          label="订单商品数量"
          align="center"
          >
          <template slot-scope="scope">
            <el-popover
		    placement="left"
		    title="商品展示"
		    width="200"
		    trigger="hover"
		    @show="ordershowproductL(scope.row.oid)"
		    >
		    <table class="tips-content">
		    	<tr><th class="s1" align="center">商品名称</th><th align="center">商品数量</th><th align="center">商品单价</th></tr>
		    	<tr v-for="item in product"><td class="s1" align="center">{{item.pname}}</td><td align="center">{{item.num}}</td><td align="center">{{item.outprice}}</td></tr>
		    </table>
            <span slot="reference"><span class="show">{{scope.row.num}}</span></span>
          </el-popover>
          </template>
          </el-table-column>
          
          <!-- 订单评论显示 -->
          <el-table-column
          label="订单交易状态"
          align="center"
          >
          <template slot-scope="scope">
            <el-popover
		    placement="right"
		    title="订单评价"
		    width="200"
		    trigger="hover"
		    @show="orderassessL(scope.row.oid)"
		    >
		    <span></span>
		    <span></span>
            <span slot="reference">
            <span class="show">{{scope.row.status == 2 ? "运输中" : "错误"}}</span></span>
          </el-popover>
          </template>
          </el-table-column>
          
          <el-table-column
          label="优惠卷"
          align="center"
          width="120px"
          >
          <template slot-scope="scope">
            <span v-if="scope.row.discount == ''"></span>
            <span v-if="scope.row.discount != ''">{{ scope.row.discount * 10 }}折</span>
          </template>
          </el-table-column>
          
          <el-table-column
          label="发货时间"
          align="center"
          width="160px" align="center"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.time1 == null ? "未发货" : scope.row.time1}}</span>
          </template>
          </el-table-column>
          
          <el-table-column
          label="收货时间"
          align="center"
          width="160px" align="center"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.time2 == null ? "未收货" : scope.row.time1 }}</span>
          </template>
          </el-table-column>
          
        </el-table>
    </el-card>
</div>
<script src="../../js/vue.js"></script>
<script src="../js/index.js"></script>
<script src="../../js/axios.js"></script>
<script src="../../js/qs.js"></script>
<script>
let app = new Vue({
	el: '#app',
	data: {
		orderInfo: [],
		search:{
			oid:'',
			uname:'',
			pname:'',
			status:2
		},
		product:[]
	},
	methods: {
		//获取未发货订单信息
		getordersL(){
			axios.post("../../orderController/getordersL", qs.stringify({
				status:"2"
			})).then(resp=>{
				this.orderInfo = resp.data;
			});
		},
		//搜索
		byselectL(){
			axios.get("../../orderController/byselectL",{
				params:this.search
			}).then(resp=>{
				this.orderInfo = resp.data;
			});
		},
		//查询商品信息
		ordershowproductL(oid){
			axios.post("../../orderController/ordershowproductL", qs.stringify({
				oid:oid
			})).then(resp=>{
				this.product = resp.data;
			});
		},
	},
	created(){
		this.getordersL();
	},
	computed: {
		
	}
});
</script>
</body>
</html>